<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="开始日期：">
              <el-date-picker
                v-model="form.StartDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="结束日期：">
              <el-date-picker
                v-model="form.EndDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      highlight-current-row
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column
        prop="NAME"
        label="处理厂名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="NUMBER"
        label="处理厂昨日吊计量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="颗粒物"
        label="昨日排放颗粒物"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="氮氧化物"
        label="昨日排放氮氧化物"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="氯化氢"
        label="昨日排放氯化氢"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="二氧化硫"
        label="昨日排放二氧化硫"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="一氧化碳"
        label="昨日排放一氧化碳"
        align="center"
      ></el-table-column>
      <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      loading: false,
      form: {
        StartDate: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
        EndDate: formatDate(new Date(), 'yyyy-MM-dd'),
      },
      // teamList: [{ "CLIENT_NAME": "机扫车" }, { "CLIENT_NAME": "垃圾车" }],
      // teamValue: '机扫车',
      tableData: [],
      originalData: []
    }
  },
  created () {
    this.getlistdata()
  },
  methods: {
    async getlistdata () {
      this.currentPage = 1;
      // this.loading = true
      // var url = 'RubbishVehicle/GetZZZCLCWorkCount?type=2&StartTime=' + this.form.StartDate + '&EndTime=' + this.form.EndDate
      // const { data } = await this.$Http.get(url)
      // for (var i = data.length - 1; i >= 0; i--) {
      //   if (data[i].Count == 0) {
      //     data.splice(i, 1);
      //   }
      // }
      this.tableData = [
        { "炉膛温度": "750°C", "风机风量": "20.6m/s", "布袋压强": "1150Pa", "锅炉负荷": "正常", "颗粒物": "3.291", "氮氧化物": "119.001	", "氯化氢": "21.867", "二氧化硫": "56.75", "一氧化碳": "20.914", "ID": "1001", "NAME": "天津碧海环保垃圾处理厂", "LONGITUDE": "117.426409", "LATITUDE": "38.872884", "LOCATION": "天津市津南区小站镇黄台工业园嘉园道11号", "CLIENT_NO": "0000009", "TYPE": "厨余垃圾处理厂", "NUMBER": "3000", "THEORY": "焚烧发电", "COMPANY": "天津碧海环保技术咨询服务有限公司" },
        { "炉膛温度": "788°C", "风机风量": "20.1m/s", "布袋压强": "1060Pa", "锅炉负荷": "正常", "颗粒物": "7.333	", "氮氧化物": "199.443", "氯化氢": "25.806", "二氧化硫": "12.246", "一氧化碳": "1.207", "ID": "1002", "NAME": "天津泰环垃圾处理厂", "LONGITUDE": "117.343029", "LATITUDE": "39.230103", "LOCATION": "天津市东丽区杨北公路296号", "CLIENT_NO": "0000009", "TYPE": "其他垃圾处理厂", "NUMBER": "1000", "THEORY": "焚烧发电", "COMPANY": "天津泰环再生资源利用有限公司" },
        { "炉膛温度": "753°C", "风机风量": "25.2m/s", "布袋压强": "1250Pa", "锅炉负荷": "正常", "颗粒物": "0.865", "氮氧化物": "43.149", "氯化氢": "1.877", "二氧化硫": "18.971", "一氧化碳": "3.031", "ID": "1003", "NAME": "天津双港垃圾焚烧发电厂", "LONGITUDE": "117.294731", "LATITUDE": "39.048150", "LOCATION": "", "CLIENT_NO": "0000009", "TYPE": "其他垃圾处理厂", "NUMBER": "2000", "THEORY": "焚烧发电", "COMPANY": "" },
        { "炉膛温度": "772°C", "风机风量": "20.8m/s", "布袋压强": "1315Pa", "锅炉负荷": "正常", "颗粒物": "0.826", "氮氧化物": "91.284", "氯化氢": "5.903", "二氧化硫": "38.091", "一氧化碳": "2.883", "ID": "1004", "NAME": "天津光大环保垃圾处理厂", "LONGITUDE": "117.326705", "LATITUDE": "38.851005", "LOCATION": "", "CLIENT_NO": "0000009", "TYPE": "其他垃圾处理厂", "NUMBER": "1500", "THEORY": "焚烧发电", "COMPANY": "光大环保能源(天津)有限公司" },
        { "炉膛温度": "720°C", "风机风量": "21.3m/s", "布袋压强": "1151Pa", "锅炉负荷": "正常", "颗粒物": "0.146", "氮氧化物": "183.391", "氯化氢": "27.039", "二氧化硫": "46.533", "一氧化碳": "0.578", "ID": "1006", "NAME": "东丽中环节餐厨垃圾处理厂", "LONGITUDE": "117.340171", "LATITUDE": "39.230758", "LOCATION": "", "CLIENT_NO": "0000009", "TYPE": "厨余垃圾处理厂", "NUMBER": "1000", "THEORY": "焚烧发电", "COMPANY": "" },
        { "炉膛温度": "768°C", "风机风量": "23.2m/s", "布袋压强": "1220Pa", "锅炉负荷": "正常", "颗粒物": "5.043", "氮氧化物": "133.092", "氯化氢": "22.647", "二氧化硫": "28.461", "一氧化碳": "1.854", "ID": "1007", "NAME": "东丽中环节垃圾焚烧处理厂", "LONGITUDE": "117.338834", "LATITUDE": "39.228994", "LOCATION": "", "CLIENT_NO": "0000009", "TYPE": "其他垃圾处理厂", "NUMBER": "1000", "THEORY": "焚烧发电", "COMPANY": "" }]
      // this.loading = false
    },
    // 导出Excel
    exportExcel () {
      let excelName = '车辆运往转运站趟次'
      const tHeader = ['LICENSE_PLATE', 'Count', 'SD', 'ED', 'RoadName']
      const filterVal = ['车辆名称', '运输趟次', '第一次到达时间', '最后一次离开时间', '转运站名称']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    //详情
    handleEdit (index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
</style>